<template>
  <div class="setLink">
    <div class="btns" v-if="titemState !== taskState['unstudy']">
      <el-popover
        popper-class="setLinkPopover"
        placement="right"
        width="160"
        v-model="visible"
        size="mini"
        :disabled="isTimeOut"
      >
        <div class="setLinkContent">
          <div class="inputBox">
            <el-input
              placeholder="例: https://codelover.club/"
              v-model="inputLink"
              clearable
              size="mini"
            />
            <el-button size="mini" @click="checkInputText">确认</el-button>
          </div>
          <p>只能填入一个网络连接，多个连接无效!</p>
        </div>
        <el-button slot="reference" type="text" size="mini" :disabled="titemState !== taskState['studying'] || isTimeOut">{{
          settedLink ? "修改链接" : "设置链接"
        }}</el-button>
      </el-popover>
      <el-button type="text" @click="showStuShowDialog = true" style="margin-left:10px;" :disabled="titemState !== taskState['studying']">学业管理</el-button>
    </div>
    <links :settedLink="settedLink" />
    <p style="color: red;" v-if="showErrorTip">填入的链接有误</p>
    <stuShowDialog
      :showStuShowDialog="showStuShowDialog"
      @close="showStuShowDialog = false"
      v-if="showStuShowDialog"
    />
  </div>
</template>

<script>
import { taskState } from "@/util/guidingtextType";
const stuShowDialog = () =>
  import("@/views/courses/detail/task_N/taskType_N/compoment/stuShowDialog");
const links = () =>
  import("@/views/courses/detail/task_N/taskType_N/compoment/links");
export default {
  components: {
    stuShowDialog,
    links
  },
  data() {
    return {
      taskState,
      visible: false,
      inputLink: "",
      settedLink: "",
      showErrorTip: false,
      showStuShowDialog: false,
    };
  },
  watch: {
    value(newValue) {
      this.settedLink = newValue
      this.inputLink = newValue
    },
  },
  props: {
    value: String,
    titemState: String,
    isTimeOut: Boolean
  },
  created() {
    if (this.value) {
      this.settedLink = this.value;
      this.inputLink = this.value;
    }
  },
  methods: {
    async checkInputText() {
      // 1. 去掉 g 标志，只保留 i（不区分大小写）
      // 2. 用 ^…$ 限定全串匹配
      // 3. 负向断言 (?!…) 确保不会出现第二个协议头
      // 4. 域名段只允许字母、数字、下划线、横杠，且必须至少有一个“点”分段
      // 5. 可选路径／查询／片段段允许任意非空白字符（包含中文、百分号编码等），但不允许空格
      const urlRegex = /^(?!.*(?:https?:\/\/|ftp:\/\/).*(?:https?:\/\/|ftp:\/\/))(?:https?:\/\/|ftp:\/\/)[A-Za-z0-9\-_]+(?:\.[A-Za-z0-9\-_]+)+(?:\/[^\s]*)?$/i;

      const link = this.inputLink.trim();

      if (urlRegex.test(link)) {
        // link 一定是单个完整 URL
        this.settedLink   = link;
        this.showErrorTip = false;
        this.$emit("change", this.settedLink);
      } else {
        this.showErrorTip = true;
      }

      this.visible = false;
    },
    getStatus(url){
      return new Promise((resolve,reject) => {
        let link = document.createElement('link')
        link.rel="stylesheets",
        link.type="text/html"
        link.href=url;

        link.onload=function(){
          console.log(1);
          resolve(true)
        }
        link.onerror=function(){
          console.log(122);
          resolve(false)
        }
        document.body.appendChild(link)
      })
    }
  },
};
</script>

<style lang="stylus">
.setLink {
  .btns {
    .el-popover__reference-wrapper {
      button {
        font-size: 14px;
      }
    }
  }
}

.setLinkPopover {
  width: 300px !important;

  .setLinkContent {
    .inputBox {
      display: flex;

      .el-button {
        margin-left: 10px;
      }
    }
  }
}
</style>